所有的網站大概可以分成兩類：靜態網頁、動態網頁，靜態網頁顧名思義就是靜止的網頁，不會去太頻繁的更新內容；動態網頁則是會根據使用者的輸入而有不同的內容更新，包含的功能像是會員登入、購物車...等等。
在前幾篇學到一些網頁的基本組成 HTML、CSS、JS 的知識，所以接下來就要來個小試身手，嘗試打造一個完整的靜態網頁 — 個人網站。
網站成品示意
首先到範例程式碼下載專案，裡面包含完成版網頁和圖片包，你可以自己創建一個新的資料夾，再把 assets/images 裡的圖片包拖進去，並用 Vscode 開啟建立專案的架構，除了圖片包，還要新增必要的 HTML、CSS 檔案，整個專案的架構會長這樣：
|-- css
|-- style.css
|-- assets
|-- images
|-- ...
|-- index.html
編輯網頁之前，要先建立 HTML 的文件架構，這裡我們可以使用 Emmet，輸入 ! 再按 tab 快速建立。再來因為要一起編輯 HTML、CSS，所以直接連結 CSS 檔案 style.css。完成之後的程式碼會長這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 修改title -->
<title>Peiyun's website</title>
<!-- 連結css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 接下來我們主要編輯的區塊 -->
</body>
接下來要開啟本地伺服器編輯網頁並且使用即時更新的功能，所以在 index.html 右鍵點擊 Open with Live Server，就能開啟網頁（如果你還不知道 Live Server 是什麼，可以參考我的這篇）
開啟 design 資料夾內的 1024.png，是螢幕寬度為 1024px 的設計稿，我們會先從這個版本開始做，設計稿內使用的個人介紹、作品都可以自行更換成你的版本。那就先來分析一下設計稿，看看 HTML 的架構會長成什麼樣子：
可以發現整個網頁的大區塊主要會分成 Header / Primary / Works / About / Footer 五個區塊，接下來我們就會照著這個架構，一區一區的來編輯各自的 HTML 和 CSS。
另外在 style_guide.png，列出了設計稿採用的一些樣式規範。在網頁中會使用到三種字體，需要先引入才能使用 font-family 套用，所以要在 style.css 輸入下面的程式碼：
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Fira+Sans+Extra+Condensed:ital,wght@1,700&family=Philosopher:wght@700&display=swap");
其實HTML的元件大多有預設的樣式，在很多情況下這些預設的格式會干擾排版，使用 Normalize.css 將這些預設樣式移除。你可以直接複製範例程式碼的 normalize.css 加到你的專案中的 CSS 資料夾中，並在 index.html 引入：
<head>
...
<!-- style.css要記得放後面，設定的樣式才不會被覆蓋 -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
終於完成了我們的前置作業，接下來就開始在<body>裡面編輯網頁內容吧。
首先要加上語意化標籤 <header>，上圖你可以看到我拆解了 Header 的架構，藍區是網頁顯示的內容 / 紅區是包裹的容器。主要有 Logo 和 Navigation 左右兩區。
要注意的是，我們統一要在每個區塊的最外層設置 wrapper-content 包住內容，這樣內部元素寬度使用百分比的話，只要控制最外層的大小，裡面的內容就會去自動縮放。
index.html
<body>
<header>
<div class="header-content wrapper-content">
<h1 class="logo">PEI-YUN</h1>
<nav class="header-nav">
<a href="" class="link__text">HOME</a>
<a href="" class="link__text">ABOUT</a>
<a href="" class="link__text">WORKS</a>
</nav>
</div>
</header>
</body>
目前先不管螢幕的大小，統一設定 wrapper-content 的內容寬度為1024px，再另外設定每個區塊各自的樣式，這邊會是 Header 區塊 header-content。
style.css
.wrapper-content {
box-sizing: border-box;
width: 1024px;
}
.header-content {
background-color: #fff5da;
height: 70px;
padding-left: 30px;
padding-right: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-nav {
width: 330px;
display: flex;
justify-content: space-between;
}
排版搞定了之後，要設定字體。發現<a>的元素帶有連結的預設樣式，但我們不需要，所以要清除字體顏色和下底線的預設。要記得使用 Tag Selector 時，記得放在最前面才不會覆蓋後面的設定。
body {
font-family: "Noto sans TC", sans-serif;
letter-spacing: 1px;
color: #333;
line-height: 1.4;
}
a {
text-decoration: none;
color: #000;
}
...
.logo {
font-family: "Fira Sans Extra Condensed", sans-serif;
font-size: 24px;
color: #000;
text-decoration: underline;
}
.nav__text {
letter-spacing: 3px;
}
最後要順便把滑鼠移上連結的回饋樣式一併加上，之後只要使用 link-text 這個 ClassName，就會直接套用樣式。
.link-text:hover {
transition: all 0.2s; /* 轉場效果 */
color: #FFB500;
}
Header 完成！
到這邊你應該有發現在網頁的邊緣有一區空白，其實是 Body 的預設 Margin 導致的：
加入下面的程式碼來清除預設的樣式：
body {
...
margin: 0;
}
接著進入網頁的主要內容，首先加上語意化標籤 <main> 代表網頁的主內容區塊，然後每一個小區塊再用 <section> 表示，並跟 Header 一樣用 wrapper-content 包住內容。
在 Section-Primary 這個區塊裡面，主要有 左欄文字 和 右欄圖片：
index.html
...
<main>
<section class="section-primary">
<div class="primary-content wrapper-content">
<div class="wrapper-primary-text">
<!-- 左欄的內容 -->
</div>
<img class="primary__main-img" src="images/headerimg.png" alt="">
</div>
</section>
</main>
左欄的文字內容，但要注意到 "I am" 跟其他文字的樣式不太一樣，用 <span> 包住特別去作設定。
...
<div class="wrapper-primary-text">
<h2 class="primary__title section__title">Hi,there<br><span>I am</span><br>pei yun.</h2>
<p class="primary__text">I’m a front-end learner based in Taiwan.<br>
Now I’m studying for my master's degree in Digital Technology Design at NTUE.</p>
<a href="" class="primary__link-button link-button">View Works</a>
<div class="primary__social">
<img src="images/github.png" alt="">
<img src="images/codepen.png" alt="">
<img src="images/facebook.png" alt="">
<img src="images/medium.png" alt="">
</div>
</div>
...
wrapper-content 的內容我們之前統一寬度為 1024px 了，只需要再設定 Section-Primary 的版本primary-content，來控制內部元素的排版。而左右兩欄的寬度，則用百分比去設定，讓它會自動根據父元素的大小去縮放。
style.css
...
.primary-content {
background-color: #fff5da;
display: flex;
justify-content: center;
align-items: center;
padding-top: 50px;
padding-bottom: 80px;
padding-left: 30px;
padding-right: 30px;
}
.wrapper-primary-text {
width: 40%;
}
.primary__main-img {
width: 60%;
height: 100%;
}
排版搞定了之後，一樣設定字體。這邊先特別觀察一下設計稿，發現到每個 Section 區塊的 Title 都有共通的設定，所以將樣式抽離成 .section__title，之後就能重複套用。
...
.section__title {
font-family: "Philosopher";
font-weight: bold;
color: #000;
letter-spacing: 2px;
line-height: 1.2;
}
.primary__title {
font-size: 72px;
margin-bottom: 20px;
}
.primary__title > span {
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.primary__text {
margin-bottom: 25px;
}
設計稿的 Button 也都是一致性的樣式，所以一樣將樣式抽離成 link-button，另外加上 primary__link-button 設定屬於這個區塊、其他的 Button 樣式屬性。
.link-button {
display: inline-block;
background-color: #000;
border-radius: 3px;
padding: 10px 20px;
color: white;
letter-spacing: 2px;
}
.primary__link-button {
margin-bottom: 40px;
}
最後一樣我們要順便把滑鼠移上的回饋樣式加上，只要使用 link-button 這個 ClassName，就可以直接套用一樣的樣式。
.link-button:hover {
background-color: #ffb500;
transition: all 0.2s;
}
.primary__social {
width: 150px;
display: flex;
justify-content: space-between;
align-items: center;
}
終於完成 Header 跟 Section-Primary 囉！
今天講解了開發網頁的前置作業，以及 Header 跟 Section-Primary 的區塊，希望大家都能跟著步驟順利的做出一樣的網頁。雖然在文章中是貼上完整的 CSS 代碼，但建議大家在做的過程中，可以一段一段去觀察每個樣式會對網頁造成什麼樣的改變，進而去熟悉使用各式各樣的樣式，這樣會有助於日後你自己做網頁的時候，可以清楚的知道要套用什麼樣式屬性，來達成你想要的外觀。
下一篇會繼續講解剩下的三個部分：Works、Section-about 和 Footer，那我們就明天見囉！
如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️
iThome鐵人賽
看影片追技術